<template>
  <view class="container">
    <!-- 顶部导航栏 -->
    <!-- <view class="navbar">
      <text class="navbar-title">车间生产报表</text>
    </view> -->

    <!-- 可滚动报表列表 -->
    <scroll-view class="report-list" scroll-y>
      <!-- 报表卡片 -->
      <view
        v-for="(report, index) in reports"
        :key="index"
        class="report-item"
        :class="{'hover-effect': !isMobile}"
      >
        <!-- 卡片顶部：日期 & 计划生成数量 -->
        <view class="report-top">
          <text class="report-date">{{ formatDate(report.deliveryDate) }}</text>
          <view class="report-production">
            <text class="production-amount">{{ report.productionQuantity }}</text>
            <text class="production-label">件</text>
          </view>
        </view>

        <!-- 信息主体 -->
        <view class="card-body">
          <!-- 额外信息 -->
          <view class="extra-info">
            <view class="info-item">
              <text class="info-icon">📦</text>
              <text class="info-text">{{ report.productName }}</text>
            </view>
            <view class="info-item">
              <text class="info-icon">🏭</text>
              <text class="info-text">{{ report.workshopName }}</text>
            </view>
            <view class="info-item">
              <text class="info-icon">👷</text>
              <text class="info-text">{{ report.workerName }}</text>
            </view>
          </view>

          <!-- 状态及操作 -->
          <view class="action-area">
            <view 
              class="status-tag"
              :class="{
                'status-pending': report.status === 2,
                'status-approved': report.status === 3,
                'status-rejected': report.status === 4
              }"
            >
              {{ getStatusText(report.status) }}
            </view>
            <view class="button-group" v-if="report.status === 2">
              <button 
                class="btn approve-btn"
                @click="handleAction(report, 'approve')"
              >
                <text class="btn-icon">✅</text>
                通过
              </button>
              <button 
                class="btn reject-btn"
                @click="handleAction(report, 'reject')"
              >
                <text class="btn-icon">❎</text>
                驳回
              </button>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isMobile: false,
      reports: []
    };
  },
  onLoad() {
    this.detectDevice();
    this.fetchReports(); // ✅ 现在这个方法已存在
  },
  methods: {
    // 设备检测
    detectDevice() {
      this.isMobile = uni.getSystemInfoSync().platform === 'android' || 
                      uni.getSystemInfoSync().platform === 'ios';
    },

    // ⭐️ 补全核心方法
    // 获取报表数据
    async fetchReports() {
      try {
        const res = await uni.request({
          url: 'http://localhost:1003/planning/findAllPlanning?status=2',
          method: 'GET'
        });
        
        if (res.data?.code === 200) {
          this.reports = res.data.data.map(item => ({
            ...item,
            deliveryDate: this.formatDate(item.deliveryDate)
          }));
        } else {
          uni.showToast({ title: res.data?.msg || '获取数据失败', icon: 'none' });
        }
      } catch (err) {
        console.error('请求失败:', err);
        uni.showToast({ title: '网络错误', icon: 'none' });
      }
    },

    // 统一操作处理
    handleAction(report, actionType) {
      const newStatus = actionType === 'approve' ? 3 : 4;
      const updateData = { ...report, status: newStatus };

      uni.request({
        url: 'http://localhost:1003/planning/updatePlanning',
        method: 'POST',
        data: updateData,
        success: (res) => {
          if (res.data?.code === 200) {
            uni.showToast({
              title: actionType === 'approve' ? '审批成功' : '驳回成功',
              icon: 'success'
            });
            this.reports = this.reports.map(item => 
              item.id === report.id ? { ...item, status: newStatus } : item
            );
          }
        }
      });
    },

    // 其他工具方法
    formatDate(dateString) {
      return dateString ? dateString.split(' ')[0] : '--';
    },
    getStatusText(status) {
      const statusMap = { 2: '待审核', 3: '已通过', 4: '已驳回' };
      return statusMap[status] || '未知状态';
    }
  }
};
</script>

<style scoped>
/* 基础样式 */
:root {
  --primary-color: #409EFF;
  --success-color: #67C23A;
  --warning-color: #E6A23C;
  --danger-color: #F56C6C;
  --text-primary: #303133;
  --text-regular: #606266;
  --text-secondary: #909399;
  --background-light: #f8f9fa;
}

/* 容器 */
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: var(--background-light);
}

/* 导航栏 */
.navbar {
  height: 60px;
  background: var(--primary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}
.navbar-title {
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 1px;
}

/* 报表列表 */
.report-list {
  flex: 1;
  padding: 16px;
  background: var(--background-light);
}

/* 报表卡片 */
.report-item {
  background: #fff;
  border-radius: 12px;
  margin-bottom: 16px;
  padding: 20px;
  box-shadow: 0 3px 6px rgba(0,0,0,0.05);
  transition: all 0.3s ease;
}
.hover-effect:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.1);
}

/* 卡片顶部 */
.report-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 16px;
  border-bottom: 1px solid #eee;
}
.report-date {
  color: var(--text-secondary);
  font-size: 14px;
}
.report-production {
  display: flex;
  align-items: baseline;
}
.production-amount {
  font-size: 24px;
  font-weight: 600;
  color: var(--primary-color);
  margin-right: 4px;
}
.production-label {
  font-size: 14px;
  color: var(--text-secondary);
}

/* 卡片主体 */
.card-body {
  padding-top: 16px;
}

/* 信息项 */
.extra-info {
  margin-bottom: 16px;
}
.info-item {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}
.info-icon {
  margin-right: 8px;
  font-size: 16px;
}
.info-text {
  font-size: 14px;
  color: var(--text-regular);
}

/* 状态标签 */
.status-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 15px;
  font-size: 12px;
  font-weight: 500;
}
.status-pending {
  background: rgba(230,162,60,0.1);
  color: var(--warning-color);
}
.status-approved {
  background: rgba(103,194,58,0.1);
  color: var(--success-color);
}
.status-rejected {
  background: rgba(245,108,108,0.1);
  color: var(--danger-color);
}

/* 操作按钮 */
.action-area {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
}
.button-group {
  display: flex;
  gap: 8px;
}
.btn {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 13px;
  border: none;
  transition: all 0.2s;
}
.btn-icon {
  margin-right: 4px;
}
.approve-btn {
  background: rgba(103,194,58,0.1);
  color: var(--success-color);
}
.approve-btn:active {
  background: rgba(103,194,58,0.2);
}
.reject-btn {
  background: rgba(245,108,108,0.1);
  color: var(--danger-color);
}
.reject-btn:active {
  background: rgba(245,108,108,0.2);
}

/* 移动端适配 */
@media (max-width: 768px) {
  .report-item {
    padding: 16px;
  }
  .production-amount {
    font-size: 20px;
  }
  .btn {
    padding: 6px 12px;
  }
}
</style>